import { Column } from '@ant-design/plots'
import { useRequest, useSize } from 'ahooks'
import { useLocation } from 'react-router-dom'
import { useEffect, useState, useRef } from 'react'

import { Http } from '../../../../Common/Api'
import { complexColumnTemplate } from '../Template'
import { ICON } from '../../../../Common/Configure/Icon'
import { ModalBox } from '../../../../Common/Modal/ModalBox'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { parseURLParams } from '../../../../Common/Configure/Common'

const ColorTwo = ['rgba(135, 213, 255, 1)', 'rgba(233, 147, 255, 1)', 'rgba(95, 143, 255, 1)']
const ColorFou = [
    'rgba(135, 213, 255, 1)',
    'rgba(57, 225, 195, 1)',
    'rgba(233, 147, 255, 1)',
    'rgba(95, 143, 255, 1)',
    'rgba(110, 218, 128, 1)',
    'rgba(255, 121, 121, 1)',
    'rgba(92, 103, 255, 1)',
    'rgba(107, 144, 59, 1)',
    'rgba(255, 34, 34, 1)',
    'rgba(255, 0, 204, 1)',
]

const ListOne = [
    { uuid: 1, label: '收入', value: '收入', unit: '万', icon: 'zongtouzi' },
    { uuid: 2, label: '成本', value: '成本', unit: '万', icon: 'wuyechengben' },
    { uuid: 3, label: '毛利', value: '毛利', unit: '万', icon: 'IconHoutaiShouyetouzikongjian' },
    { uuid: 4, label: '利润总额', value: '利润总额', unit: '万', icon: 'niandugongzuo' },
    { uuid: 5, label: '毛利率', value: '毛利率', unit: '%', icon: 'qunian' },
    { uuid: 6, label: '利润率', value: '利润率', unit: '%', icon: 'lishuai' },
]

export const FivA01 = () => {
    const { search } = useLocation()

    const ChartTwo = useRef()
    const SizeTwo = useSize(ChartTwo)
    const ChartThr = useRef()
    const SizeThr = useSize(ChartThr)
    const ChartFou = useRef()
    const SizeFou = useSize(ChartFou)

    const [DataOne, setDataOne] = useState({})
    const [DataTwo, setDataTwo] = useState()
    const [DataThr, setDataThr] = useState()
    const [DataFou, setDataFou] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list, list11, list12, list13 } = res
            setDataOne(list)

            setDataTwo(
                list11.reduce((result, { 收入类型, 收入, 成本, 毛利 }) => {
                    const income = { type: '收入', label: 收入类型, value: 收入 || 0 }
                    const cost = { type: '成本', label: 收入类型, value: 成本 || 0 }
                    const profit = { type: '毛利', label: 收入类型, value: 毛利 || 0 }
                    return result.concat(income, cost, profit)
                }, []),
            )
            setDataThr(
                list12.reduce((result, { 收入类型, 收入, 成本, 毛利 }) => {
                    const income = { type: '收入', label: 收入类型, value: 收入 || 0 }
                    const cost = { type: '成本', label: 收入类型, value: 成本 || 0 }
                    const profit = { type: '毛利', label: 收入类型, value: 毛利 || 0 }
                    return result.concat(income, cost, profit)
                }, []),
            )
            setDataFou(
                list13.reduce((result, { 名称, 收入, 成本, 毛利 }) => {
                    const income = { type: '收入', label: 名称, value: 收入 || 0 }
                    const cost = { type: '成本', label: 名称, value: 成本 || 0 }
                    const profit = { type: '毛利', label: 名称, value: 毛利 || 0 }
                    return result.concat(income, cost, profit)
                }, []),
            )
        },
    })

    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { status, A01, A02, A03, A04 } = res
            console.log(A02)
            if (status) {
                setDataOne(A01)
                setDataTwo(A02.map(({ type, title, amount }) => ({ type, label: title, value: Number(amount) })))
                setDataThr(A03.map(({ type, title, amount }) => ({ type, label: title, value: Number(amount) })))
                setDataFou(A04.map(({ type, title, amount }) => ({ type, label: title, value: Number(amount) })))
            } else {
                const data = {}
                if (parseURLParams(search).uuid) data.OrganizationUuid = parseURLParams(search).uuid
                runAsync({ url: 'getFinanceByOrganization', data })
            }
        },
    })

    useEffect(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'FinanceJson' } })
    }, [getData])

    const { runAsync: getLast } = useRequest(Http, { manual: true })

    const onOpen = () => {
        getLast({ url: 'getJTGJFinanceslastSummary' }).then(res => {
            const { year, month } = res
            setOptionsCall({
                type: 'OpenExcel',
                data: {
                    title: '公司报表',
                    width: 1500,
                    data: {
                        save: true,
                        year,
                        month,
                        url: 'getFinanceSummaryStatExcel',
                    },
                },
            })
        })
    }

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <>
            <div className="top">
                <CommonSmallTitle title="财务概况" style={{ marginRight: 16 }}>
                    <div className="one">
                        <div>
                            {ListOne.map(({ uuid, label, value, unit, icon }) => (
                                <div key={uuid}>
                                    {ICON[icon]}
                                    <div>{label}</div>
                                    <div>
                                        {DataOne ? DataOne[value] : 0}
                                        {unit}
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div onClick={onOpen}>公司报表</div>
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="集团内统计" style={{ marginRight: 16 }}>
                    <div className="two" ref={ChartTwo}>
                        {SizeTwo && DataTwo && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeTwo,
                                    data: DataTwo,
                                    color: ColorTwo,
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="集团外统计">
                    <div className="thr" ref={ChartThr}>
                        {SizeThr && DataThr && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeThr,
                                    data: DataThr,
                                    color: ColorTwo,
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
            <CommonSmallTitle title="财务明细" flex={469}>
                <div className="fou" ref={ChartFou}>
                    {SizeFou && DataFou && (
                        <Column
                            {...complexColumnTemplate({
                                size: SizeFou,
                                data: DataFou,
                                color: ColorFou,
                                isGroup: true,
                                yTitle: '万元',
                            })}
                        />
                    )}
                </div>
            </CommonSmallTitle>
            <ModalBox OptionsCall={OptionsCall} />
        </>
    )
}
